.article-toc-area {
  .article-toc-nav {
    margin-top: 1rem;
    margin-left: 1rem;
    top: 5rem;
    .toc-title {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    .nav > li > a {
      display: block;
      padding: 0.15rem 1.75rem;
      font-size: 1rem;
      font-weight: 500;
      color: $main-color;
      transition: all 250ms ease 0ms;
      &:hover,
      &:focus {
        padding-left: 1.25rem;
        color: $primary-active-color;
        text-decoration: none;
        background-color: $primary-active-background-color;
        border-left: 3px solid $primary-active-color;
      }
    }
  }

  .article-toc-nav .nav-link.active,
  .article-toc-nav .nav-link.active:hover,
  .article-toc-nav .nav-link.active:focus {
    padding-left: 1rem;
    font-weight: bold;
    color: $primary-active-color;
    background-color: transparent;
    border-left: 2px solid $primary-active-color;
  }

  .article-toc-nav .nav-link + ul {
    display: none;
    padding-bottom: .825rem;
  }

  .article-toc-nav .nav .nav > li > a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
    font-weight: normal;
  }

  .article-toc-nav .nav .nav > li > a:hover,
  .article-toc-nav .nav .nav > li > a:focus {
    padding-left: 29px;
  }

  .article-toc-nav .nav .nav > li > .active,
  .article-toc-nav .nav .nav > li > .active:hover,
  .article-toc-nav .nav .nav > li > .active:focus {
    padding-left: 28px;
    font-weight: 500;
  }

  .article-toc-nav .nav-link.active + ul {
    display: block;
  }

}

@mixin dark-mode {
  .article-toc-area {
    .article-toc-nav {
      .nav > li > a {
        color: $dark-main-color;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
